<template>
  <HomePanel title="人气推荐" ref="target" sub-title="人气爆款 不容错过">
    <template #right>
      <xtx-more></xtx-more>
    </template>
     <HomeList :goods="hotList" />
  </HomePanel>
</template>

<script>
import HomePanel from './home-panel'
import { findHot } from '@/api/home'
import { ref } from 'vue'
import HomeList from './home-list.vue'
// import { useIntersectionObserver } from '@vueuse/core'
import { useObserver } from '@/hooks'
// vue3 自定义钩子函数(函数是编程)
export default {
  name: 'HomeHot',
  components: { HomePanel, HomeList },
  setup () {
    // const target = ref(null)
    // const { stop } = useIntersectionObserver(
    //   target,
    //   ([{ isIntersecting }]) => {
    //     console.log('判断可视区元素是否进入可视区', isIntersecting)
    //     if (isIntersecting) {
    //       console.log('进入可视区了，发一次请求，达到目的，就关闭监控')
    //       getHotList()
    //       //   关闭监控
    //       stop()
    //     }
    //   }
    // )
    // onMounted(() => {
    //   console.log(hotRef)
    // })
    const hotList = ref([])
    const getHotList = async () => {
      const { result } = await findHot()
      //   console.log(result)
      hotList.value = result
    }
    // onMounted(() => {
    //   getHotList()
    // })
    // 调用监控函数
    const { target } = useObserver(getHotList)
    return { hotList, target }
  }
//   data () {
//     return {
//       goods: []
//     }
//   },
//   async created () {
//     const data = await findHot()
//     this.goods = data.result
//   }
}
</script>

<style scoped lang='less'>
// .goods-list {
//   display: flex;
//   justify-content: space-between;
//   height: 426px;
//   li {
//     width: 306px;
//     height: 406px;
//     img {
//       width: 306px;
//       height: 306px;
//     }
//     p {
//       font-size: 22px;
//       padding-top: 12px;
//       text-align: center;
//     }
//     .desc {
//       color: #999;
//       font-size: 18px;
//     }
//   }
// }
</style>
